<style>
	div[id*=editor] { margin-bottom: 10px; }
</style>

<h2>Beginning</h2>

<div id="editor02">
	<figure class="image"><img alt="CKEditor Logo" src="/tests/_assets/logo.png" /><figcaption>Caption</figcaption></figure>
	<h1>Hello world!</h1>
	<p>I&#39;m an instance of <a href="http://ckeditor.com">CKEditor</a>.</p>
</div>

<h2>End</h2>

<div id="editor12">
	<h1>Hello world!</h1>
	<p>I&#39;m an instance of <a href="http://ckeditor.com">CKEditor</a>.</p>
	<figure class="image"><img alt="CKEditor Logo" src="/tests/_assets/logo.png" /><figcaption>Caption</figcaption></figure>
</div>

<h2>Middle</h2>

<div id="editor22">
	<h1>Hello world!</h1>
	<figure class="image"><img alt="CKEditor Logo" src="/tests/_assets/logo.png" /><figcaption>Caption</figcaption></figure>
	<p>I&#39;m an instance of <a href="http://ckeditor.com">CKEditor</a>.</p>
</div>

<h2>Both beginning and end</h2>

<div id="editor32">
	<figure class="image"><img alt="CKEditor Logo" src="/tests/_assets/logo.png" /><figcaption>Caption</figcaption></figure>
	<h1>Hello world!</h1>
	<p>I&#39;m an instance of <a href="http://ckeditor.com">CKEditor</a>.</p>
	<figure class="image"><img alt="CKEditor Logo" src="/tests/_assets/logo.png" /><figcaption>Caption</figcaption></figure>
</div>

<h2>Only non-editable</h2>

<div id="editor42">
	<figure class="image"><img alt="CKEditor Logo" src="/tests/_assets/logo.png" /><figcaption>Caption</figcaption></figure>
	<figure class="image"><img alt="CKEditor Logo" src="/tests/_assets/logo.png" /><figcaption>Caption</figcaption></figure>
</div>


<script>
	var config2 = {
		height: 250,
		allowedContent: true
	};

	CKEDITOR.replace( 'editor02', config2 );
	CKEDITOR.replace( 'editor12', config2 );
	CKEDITOR.replace( 'editor22', config2 );
	CKEDITOR.replace( 'editor32', config2 );
	CKEDITOR.replace( 'editor42', config2 );
</script>
